<template>
   <div class="flood-info-container" :style="{ height: currentHeight + 'px' }">
    <div>
      <div class="toggle-header">
        <span class="title">信息卡</span>
        <i :class="['toggle-icon', isVisible ? 'el-icon-arrow-down' : 'el-icon-arrow-up']"  @click="toggleCard"></i>
      </div>
         <!-- 添加拖拽手柄 -->
    <div 
      class="drag-handle"
      @mousedown="startDrag"
    ></div>

      <div class="info-container">
        <n-tab :options="tabOptions" style="background-color: #fff;padding-left: 10px;" @click="tabCheckHandler"/>
        <disaster-info-card v-show="tabItem.index === 0" style="margin-bottom: 10px;padding-bottom: 20px;"></disaster-info-card>
        <rescue-info-panel v-show="tabItem.index === 1" style="margin-bottom: 10px;padding-bottom: 20px;"></rescue-info-panel>
      </div>
    </div>
</div>
</template>

<script lang="ts">
import {Component, Prop, Vue ,Emit} from 'vue-property-decorator';
import NTab from "@/components/NTab.vue";
import DisasterInfoCard from '@/views/app/components/DisasterInfoCard.vue';
import RescueInfoPanel from '@/views/app/components/RescueInfoPanel.vue';

@Component({
  components: {NTab,DisasterInfoCard,RescueInfoPanel}
})
export default class FloodInfoCard extends Vue {
  @Prop() private options!:any;
  @Prop() private models;
  isVisible= false;
  private isDragging = false;
  private startY = 0;
  private startHeight = 0;
  private toggleHeight= 50;
  private currentHeight = 300; // 初始高度
  private minHeight = 50;    // 最小高度
  private maxHeight = 600;    // 最大高度

  private disasterList:any = [
  {
    area: "赛罕区",
    waterLevel: 23,
    affected: 2323,
    status: "1",
  },
  {
    area: "赛罕区1",
    waterLevel: 232,
    affected: 23223,
    status: "2",
  },
  {
    area: "赛罕区3",
    waterLevel: 232,
    affected: 232232,
    status: "3",
  }


  ] 

  tabItem:any ={};
  tabOptions:any=[{
    index:0,
    label:'受灾情况'
  },
  {
    index:1,
    label:'周边情况'
  }];
 
  private toggleCard() {
    this.isVisible = !this.isVisible;
    if(this.isVisible){
      this.currentHeight = this.toggleHeight;
    }else{
      this.toggleHeight = this.currentHeight;
      this.currentHeight = this.minHeight;
    }
    this.emitVisibility();
  }

  @Emit('visibility-change')
  private emitVisibility() {
    return this.isVisible;
  }
  @Emit('tabCheckHandler')
  tabCheckHandler(data){
    this.tabItem = {...data.item};
    
  }

  mounted() {
    window.addEventListener('mouseup', this.stopDrag);
    window.addEventListener('mousemove', this.onDrag);
    this.tabItem = this.tabOptions[0];

  
  }

  beforeDestroy() {
    window.removeEventListener('mouseup', this.stopDrag);
    window.removeEventListener('mousemove', this.onDrag);
  }

  private startDrag(event: MouseEvent) {
    this.isDragging = true;
    this.startY = event.clientY;
    this.startHeight = this.currentHeight;
    event.preventDefault(); // 防止文本选中
  }

  private onDrag(event: MouseEvent) {
    if (!this.isDragging) return;
    
    const deltaY = this.startY - event.clientY;
    let newHeight = this.startHeight + deltaY;
    
    // 限制高度范围
    newHeight = Math.max(this.minHeight, Math.min(newHeight, this.maxHeight));
    
    this.currentHeight = newHeight;
    this.emitHeightChange();
  }

  private stopDrag() {
    this.isDragging = false;
  }


  @Emit('height-change')
  private emitHeightChange() {
    return this.currentHeight;
  }


}
</script>
<style lang="scss" scoped>
.flood-info-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  border-top: 1px solid #ebeef5;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.1);
  transition: height 0.2s ease-out;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  .drag-handle {
    height: 6px;
    width: 100%;
    cursor: ns-resize;
    background: transparent;
    position: absolute;
    top: 0;
    z-index: 10;
    &:hover {
      background: #409eff44;
    }
  }

  .toggle-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 15px;
    background-color: #f5f7fa;
    cursor: pointer;
    border-bottom: 1px solid #ebeef5;
    margin-top: 6px; // 给拖拽手柄留出空间

    &:hover {
      background-color: #ebedf0;
    }

    .title {
      font-weight: 600;
      color: #303133;
    }

    .toggle-icon {
      color: #909399;
      font-size: 14px;
      transition: transform 0.3s;
    }
  }

  .content-wrapper {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
  }

  // 保留原有对话框样式
  ::v-deep .el-dialog__body {
    padding: 0px 10px; 
    color: #606266;
    font-size: 14px;
    word-break: break-all;
  }

  ::v-deep .el-dialog__header {
    padding: 5px;
    padding-bottom: 0px;
  }
  > div {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .info-container {
    height: calc(100% - 150px); /* 头部约50px */
    overflow-y: auto;
    padding: 0 10px;
  }
}
</style>
